import { PlusOutlined } from '@ant-design/icons';
import { Button, message, Popconfirm, Input, Select } from 'antd';
import React, { useState, useRef, useEffect } from 'react';
import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import { filterDateParse } from '@/utils/utils.js';
import _ from 'lodash';
import request from '@/utils/request';
import apiPath from '@/utils/apiPath.js';
import { widgetsControl } from '@/utils/authority.js';


const TableList = () => {
  const actionRef = useRef();

  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      valueType: 'text',
      search: false,
    },
    {
      title: '文件名',
      dataIndex: 'name',
      valueType: 'text',
      search: true,
      renderFormItem: (item, { type, defaultRender, ...rest }, form) => {
        return (
          <Input placeholder="请输入关键字"/> 
        );
      },
    },
    {
      title: '链接',
      dataIndex: 'url',
      valueType: 'text',
      search: false,
    },
    {
      title: '操作者',
      dataIndex: 'user',
      valueType: 'text',
      search: false,
      renderText: val => {
        return val.name ? val.name : '-';
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      valueType: 'text',
      search: false,
      valueEnum: {
        0: { text: '禁用' },
        1: { text: '处理中' },
        2: { text: '完成' },
      },
    },
    {
      title: '新建时间',
      dataIndex: 'created_time',
      renderText: val => filterDateParse(val),
      valueType: 'text',
      search: false
    },
    {
      title: '修改时间',
      dataIndex: 'updated_time',
      renderText: val => filterDateParse(val),
      valueType: 'text',
      search: false
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => {
        return record.url && record.status === 2 ? (
          <a 
            key="edit"
            onClick={() => {
              window.open(record.url);
            }}>
            点击下载
          </a>
        ) : null
      }
    },
  ];

  return (
    <PageContainer>
      <ProTable
        headerTitle="下载中心"
        actionRef={actionRef}
        rowKey="id"
        search={{
          labelWidth: 100,
          defaultCollapsed: false
        }}
        pagination={{
          pageSize: 15,
          pageSizeOptions: [15, 30, 60, 100]
        }}
        toolBarRender={() => [
          <Button
            type="primary"
            key="primary"
            onClick={() => {
              request(apiPath.GET_DOWNLOAD_LIST, {
                method: 'POST',
                data: {},
              });
            }}
          >
            <PlusOutlined /> 新建
          </Button>,
        ]}
        request={async (params) => {
          let parseParams = _.omit(params, 'current', 'pageSize');
          parseParams.page = params.current;
          parseParams.per_page = params.pageSize;
          const res = await request(apiPath.GET_DOWNLOAD_LIST, {
            method: 'GET',
            params: parseParams,
          })
          .catch(() => {
            return false;
          });
          return res ? {
            data: res.data.list,
            success: true,
            total: res.data.page.total
          } : {
            data: [],
            success: true,
            total: 0
          }
        }}
        columns={columns}
      />
    </PageContainer>
  );
};

export default TableList;
